import React, { useState } from 'react';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { StyleSheet, TouchableOpacity } from 'react-native';
import { Box, Button, Input, ScrollView, Text, View } from 'native-base';
import { CommonStyle } from '../../../../common/commonStyle.ts';
import AntDesign from 'react-native-vector-icons/AntDesign';
import { NavigationProp } from '@react-navigation/native';
import { Touchable } from 'react-native-toast-message/lib/src/components/Touchable';
import { LayoutChangeEvent } from 'react-native/Libraries/Types/CoreEventTypes';

interface IHeaderProps {
  navigation: NavigationProp<any, 'merchantProduct'>;
  onLayout: (height: number) => void;
  activeId: number;
  onMerchantChange: (id: number) => void;
  merchantList: IObtainMerchantListRes[];
}
const Header: React.FC<IHeaderProps> = (props) => {
  const insets = useSafeAreaInsets();

  // 获得content元素高度
  const handleContentLayout = (event: LayoutChangeEvent) => {
    props.onLayout(event.nativeEvent.layout.height);
  };

  return (
    <View onLayout={handleContentLayout}>
      <View style={[{ paddingTop: insets.top + 12 }, styles.header]}>
        <AntDesign name={'arrowleft'} size={24} color={'black'} style={{ marginRight: 12 }} onPress={() => props.navigation.goBack()} />
        <Box alignItems="center" flex={1}>
          <Input
            variant="filled"
            borderRadius={16}
            backgroundColor={'white'}
            focusOutlineColor={'white'}
            type="text"
            height={8}
            size={'xs'}
            placeholder="请输入产品关键字"
            InputRightElement={
              <Button size="xs" padding={0} rounded="none" bg={CommonStyle.mainColor} w="1/6" h="full">
                搜索
              </Button>
            }
          />
        </Box>
      </View>
      {props.merchantList.length > 1 && (
        <View style={styles.tab}>
          {props.merchantList.map((item) => {
            return (
              <TouchableOpacity style={styles.tabItem} key={item.id} onPress={() => props.onMerchantChange(item.id)}>
                <Text textAlign={'center'} numberOfLines={1} style={props.activeId === item.id ? styles.active : styles.text} fontSize={13}>
                  {item.name}
                </Text>
              </TouchableOpacity>
            );
          })}
        </View>
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  header: { backgroundColor: CommonStyle.mainColor, paddingBottom: 12, flexDirection: 'row', paddingHorizontal: 16, alignItems: 'center' },
  tab: { width: '100%', backgroundColor: '#fff', flexDirection: 'row' },
  tabItem: { flex: 1, height: 40, justifyContent: 'center', paddingHorizontal: 8, maxWidth: '34%' },
  text: { color: CommonStyle.lightGray, fontWeight: 'light' },
  active: { color: CommonStyle.fontColor, fontWeight: 'bold', borderBottomWidth: 1, height: '100%', borderBottomColor: CommonStyle.mainColor, paddingTop: 9 },
});

export default Header;
